<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<div xmlns="http://www.w3.org/1999/html">
  <h2>
    <span>Geographic Zones GeoJSON</span>
  </h2>

  <div>
    <h3>Upload GeoJSON file</h3>
    <table>
      <tr>
        <td>Select level here</td>
        <td><select ng-model="level" ng-change="filterByLevel()">
          <option ng-repeat="lv in geographicLevels" value="{{ lv.id }}">{{ lv.name }}</option>
        </select></td>
      </tr>
      <tr>
        <td>Load the geoJSON file here</td>
        <td><input ng-change="importFile(this);" ng-model="filename" type="file" name="jsonfile" id="jsonfile"></td>
      </tr>
    </table>
  </div>
  <br/>

  <div>
    <div ng-show="geojson != undefined && level != undefined">
      <p>
        Please drag and drop the GIS records on the left and match to the database geographic zone records on the right.
      </p>
    </div>

  </div>
  <br/>

  <div class="clear-both"></div>
  <div class="pull-right">
    <leaflet center="center" width="600px" height="400px" geojson="geojson"></leaflet>
  </div>
  <div class="row">
    <div class="span5">
      <div ng-show="geojson != undefined">
        <h2>GIS Data</h2>
        Search <input type="text" ng-model="search_geo">

        <div style="overflow-y: scroll;height: 400px;">
          <table class="table">
            <tbody>
            <tr ng-drag="true" ng-drag-data="feature" ng-drag-started="onDrag($data, $event)"
                ng-class="feature.properties.mapped == true? 'message alert alert-success':''"
                ng-repeat="feature in search(features, search_geo)"
                ng-hide="(hide_mapped && feature.properties.mapped)">
              <td>{{ feature.properties.ADM1 }}</td>
              <td>{{ feature.properties.ADM2 }}</td>
              <td>{{ feature.properties.ADM3 }}</td>
              <td>{{ feature.properties.ID }}</td>
              <td>{{ feature.properties.mapped == true? 'Yes' : 'No' }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="span1">
      &nbsp;
    </div>
    <div class="span5">
      <div ng-show="level != undefined && geojson != undefined">
        <h2>Geo Zones (In DB)</h2>
        <span class="pull-right">
            <input type="checkbox" ng-model="hide_mapped"> Hide matched
      </span>
        Search <input type="text" ng-model="search_zone">
        <div style="overflow-y: scroll;height: 400px;">
        <table class="table">
          <tr
            ng-hide="(hide_mapped && zone.mapped) || ( (search_zone != undefined && search_zone != '' && ( zone.adm2.indexOf(search_zone) < 0  && zone.adm3.indexOf(search_zone) < 0)))"
            ng-class="zone.mapped == true? 'message alert alert-success':''"
            ng-repeat="zone in geographicZones"
            ng-drop="true" ng-drop-success="onDrop($data, $event, zone)">
            <td>{{ zone.adm2 }}</td>
            <td>{{ zone.adm3 }}</td>
            <td>{{ zone.newId }}</td>
            <td>{{ zone.mapped == true? 'Yes': 'No' }}</td>
          </tr>
        </table>
        </div>
      </div>
    </div>
  </div>
</div>


<div form-toolbar id="action_buttons" class="action-buttons" ng-show="geojson != undefined && level != undefined">
  <div class="form-cell button-row">
    <div class="form-cell button-row">
      <a class="btn btn-primary pull-left" ng-click="save();">Save</a>

      <div class="toolbar-success" ng-show="message">{{ message }}</div>
    </div>

  </div>
</div>

</div>